import React, { Component } from "react";
import { HeaderContainer } from "./style";
import { connect } from "react-redux";
import { actionCreator } from "./store";
import logo from "../../../asset/img/logo.png";
import vip from "../../../asset/img/vip.png";
import { CSSTransition } from "react-transition-group";


class Header extends Component {
    displaySearchPop(){
        const { searchFlag, inputList, totlePage, currentPage , handleHoldPop ,holdFlag,handleChangePage} = this.props;
        if((searchFlag || holdFlag) && totlePage > 0){
            let temparr = [];
            for(let i = (currentPage-1)*10; i <= currentPage*10 - 1; i++){
                if(!inputList.get(i)) break;
                temparr.push(inputList.get(i));
            }
            return(
                <div className="searchPop" onMouseEnter={handleHoldPop} onMouseLeave={handleHoldPop}>
                    <div className="searchPopTitle"><span>热门搜索</span><span onClick={handleChangePage} className="changeItem"><i></i>换一换</span></div>
                    <div className="searchPopContent">
                        {
                            temparr.map((item,index) => {
                                return (<span key={index}><a href="#">{item}</a></span>)
                            })
                        }
                    </div>
                </div>
            );
        }
    }
    render() {
        const {searchFlag, handleChangeSearchFlag, inputList} = this.props;
        return (
            <HeaderContainer className="header">
                <div className="widthLimit flexBetween">
                    <div className="navLeft">
                        <div className="logo">
                            <a href="#">
                                <img src={logo} />
                            </a>
                        </div>
                    </div> 
                    <div className="navCenter">
                        <div className="centerLeft">
                            <div className="toHome"><a href="#"><i className="jianfont">&#xe60c;</i><span>首页</span></a></div>
                            <div className="download"><a href="#"><i className="jianfont">&#xe784;</i><span>下载App</span></a></div>
                            <div className="searchwrap">
                                <div className="search">
                                    <CSSTransition 
                                        in={searchFlag}
                                        timeout={500}
                                        classNames="searchTransition"
                                    >
                                        <input type="text" placeholder="搜索" onFocus={() => {handleChangeSearchFlag(inputList)}} onBlur={() => {handleChangeSearchFlag(inputList)}}/>
                                    </CSSTransition>
                                    <i className={searchFlag ? "jianfont searchicon searchiconChange" :"jianfont searchicon"}>&#xe617;</i>
                                </div>
                            {this.displaySearchPop()}    
                            </div>
                        </div>
                        <div className="centerRight">
                            <div className="changeFont"><span className="jianfont">&#xe636;</span></div>
                            <div className="vip">
                                <a href="#">
                                    <img src={vip}/>
                                </a>
                            </div>
                        </div>                        
                    </div>
                    <div className="navRight">                       
                        <div className="login">
                            <a href="#">
                                <span>登录</span>
                            </a>
                        </div>
                        <div className="reg">
                            <a href="#">
                                <span>注册</span>
                            </a>
                        </div>
                        <div className="edit">
                            <a href="#">
                                <i className="jianfont">&#xe61b;</i> 
                                <span>写文章</span>
                            </a>
                        </div>
                    </div>
                </div>
            </HeaderContainer>
        );
    }    
}

const mapStateToProps = (state) => {
    return {
        searchFlag : state.getIn(["header","searchFlag"]),
        inputList : state.getIn(["header","inputList"]),
        totlePage : state.getIn(["header","totlePage"]),
        currentPage : state.getIn(["header","currentPage"]),
        holdFlag : state.getIn(["header","holdFlag"])
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleChangeSearchFlag(inputList) {
            if(!inputList.size){
                dispatch(actionCreator.getInputList());
            }
            dispatch(actionCreator.getSearchFlag());
        },
        handleHoldPop(){
            dispatch(actionCreator.dispatchHoldAction());
        },
        handleChangePage(){
            dispatch(actionCreator.changePage());
        }
    }
}
export default connect(mapStateToProps,mapDispatchToProps)(Header);